<template>
  <div class="row">
    <div class="col-md-6">
      <div class="index-card">
        <div class="index-card-head">
          <h3>Spring Boot</h3>
        </div>
        <div class="index-card-body">


          <div class="index-card-body-list" v-for="sb in  springBoots" :key="sb.id ">
            <span style="font-size: 12px;color:#aaa;margin-right: 5px;">{{sb.createDate}}</span>
            <a  style="cursor: pointer" target="_blank" itemprop="url" @click="view(sb.id)">
              {{sb.title}}</a>
          </div>

        </div>
        <div class="index-card-footer" style="text-align: right;">
          <a href="/#/archives">前往专题</a>
        </div>
      </div>
    </div>

    <div class="col-md-6">
      <div class="index-card">
        <div class="index-card-head">
          <h3>Spring Cloud</h3>
        </div>
        <div class="index-card-body">


          <div class="index-card-body-list" v-for="sb in springClouds " :key="sb.id">
            <span style="font-size: 12px;color:#aaa;margin-right: 5px;">{{sb.createDate}}</span>
            <a    @click="view(sb.id)" style="cursor: pointer" target="_blank" itemprop="url" >
              {{sb.title}}</a>
          </div>
        </div>
        <div class="index-card-footer" style="text-align: right;">
          <a href="/#/archives">前往专题</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {getArticles, getHotArtices, getNewArtices, articleList} from '@/api/article'

  export default {
    data() {
      return {
        listQuery: {
          keyword: null,
          pageNum: 1,
          pageSize: 10,

        },
        springBoots: [],
        springClouds: [],
      }


    },
    created() {
      this.getSpringBoots();
      this.getSpringClouds()
    },
    methods: {
      view(id) {
        this.$router.push({path: `/view/${id}`})
      },
      getSpringBoots() {
        let listQuery= {
          keyword: null,
          pageNum: 1,
          pageSize: 10,
          categoryName:'springBoot'

        };
        articleList(listQuery).then(res => {
          this.springBoots = res.data.list
        })

      },
      getSpringClouds() {
        let listQuery= {
          keyword: null,
          pageNum: 1,
          pageSize: 10,
          categoryName:'springCloud'

        };
        articleList(listQuery).then(res => {
          this.springClouds = res.data.list;
          console.log("s=>>" + this.springClouds)
        })

      }
    }
  }

</script>

<style>

</style>
